<template>
  <el-card header="订单列表" shadow="hover">
    <el-table
      :data="shopList"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="orderId"
        fixed="left"
        align="center"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="detail[goodsName]"
        fixed="left"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="img"
        align="center"
        label="商品">
        <template slot-scope="scope">
          <img :src="scope.row.detail.imgList" width="50" style="border-radius: 4px">
        </template>
      </el-table-column>
      <el-table-column
        prop="detail.goodsCount"
        label="商品数量">
      </el-table-column>
      <el-table-column
        prop="detail.goodsSpecsValue"
        label="商品型号">
      </el-table-column>
      <el-table-column
        prop="customer.nickName"
        label="买家姓名">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="支付金额">
      </el-table-column>
      <el-table-column
        prop="payType"
        label="支付方式">
        线上支付
      </el-table-column>
      <el-table-column
        prop="tel"
        label="买家联系方式">
        15651837665
      </el-table-column>
      <el-table-column
        prop="evaluationWord"
        label="评价信息">
      </el-table-column>
      <el-table-column
        prop="date"
        label="订单状态">
        <template slot-scope="scope">
          <el-tag type="success">{{scope.row.orderStatus.orderStatusValue}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="下单时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  import  {getOrderList, getOrderDetail} from "../../api/order";

  export default {
    name: "list",
    data() {
      return {
        shopList:  [{
          date: '2019年3月9日',
          img: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          title: 'XXX薯片',
          address: '食品',
          itemNum: 100,
          orderNum: 200,
          rate: 15615615652,
          logo: '5835698123568356389563856238569',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          img: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          title: 'XXX薯片',
          address: '食品',
          itemNum: 100,
          orderNum: 200,
          rate: 15615615652,
          logo: '5835698123568356389563856238569',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          img: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          title: 'XXX薯片',
          address: '食品',
          itemNum: 100,
          orderNum: 200,
          rate: 15615615652,
          logo: '5835698123568356389563856238569',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          img: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          title: 'XXX薯片',
          address: '食品',
          itemNum: 100,
          orderNum: 200,
          rate: 15615615652,
          logo: '5835698123568356389563856238569',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }, {
          date: '2019年3月9日',
          img: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJWfMW0e77FazOPArxbzPxicdlDxfn5Nox9iaVIgID1gKq5DxMjgjMGL2YicybL0IpuSBhMiaWhYz4oOA/132',
          title: 'XXX薯片',
          address: '食品',
          itemNum: 100,
          orderNum: 200,
          rate: 15615615652,
          logo: '5835698123568356389563856238569',
          intro: '这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....这是一段商家简介, 描述了商家的一些简单信息....'
        }],
        currentPage: 1,
        pageSize: 10,
        total: 20,
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getOrderList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getOrderList();
      },
      async getOrderList() {
        let res = await getOrderList({pageSize: this.pageSize, pageIndex: this.currentPage})

        for (let i = 0; i < res.orders.list.length; ++i) {
          let detail = await getOrderDetail({orderId: res.orders.list[i].orderId});
          detail = detail.order.specsList[0];
          // detail.map(v => {
          //   v.imgList = v.goodsImgList.splice(',')[0]
          // })
          detail.imgList = detail.goodsImgList.split(',')[0]
          res.orders.list[i].detail = detail;
          res.orders.list[i].payType = '线上支付';
          res.orders.list[i].tel = '15651837665';
        }
        // res.orders.list.map(async (v) => {
        //   let detail = await getOrderDetail({orderId: v.orderId});
        //   v.detail = detail.order.specsList[0];
        // })
        console.log(res.orders.list);
        this.shopList = res.orders.list;
        this.total = res.orders.total;
      }
    },
    created() {
      this.getOrderList();
    }
  }
</script>

<style scoped>

</style>
